<template>
  <view class="cu-list menu-avatar" v-if="commentRootInfo">
    <view class="cu-item">
      <view class="cu-avatar round lg"
            :style="'background-image:url('+prefix+commentRootInfo.fromAvatar+');'"></view>
      <view class="content">
        <view class="text-lg text-bold">
          {{ commentRootInfo.fromUsername }}
        </view>
        <view class="text-gray text-sm">
          {{ commentRootInfo.createTime }}
        </view>
      </view>
    </view>
    <!-- 评论内容 -->
    <view class="text-black">
      <view class="margin-lr padding-left padding-tb">
        <text class="text-lg text-break-all"> {{ commentRootInfo.content }}</text>
      </view>
      <!-- 商品信息 -->
      <view  @click="clickDetail(2)" v-if="articleInfo">
        <view class="margin-left-xl margin-right bg-gray radius-lg">
          <view class="flex justify-between">
            <view class="flex">
              <view class="padding-xs">
                <MrImage :src="articleInfo.coverImage" :width="160" :height="160"></MrImage>
              </view>
              <view class="padding-xs padding-top-sm text-df text-black">
                <view class="text-bold">{{ articleInfo.title }}</view>
<!--                <view class="text-gray text-sm padding-top-xs">-->
<!--                  <view class="text-cut-2" style="width: 40vw" v-html="articleInfo.content"></view>-->
<!--                </view>-->
              </view>
            </view>
            <view class="flex justify-center">
              <view class="flex align-center text-xxl text-gray padding-lr-sm">
                <text class="cuIcon-appreciate"></text>
                <text class="text-lg">{{ articleInfo.likeCount || '' }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- 浏览 -->
        <view class="margin-lr padding-left padding-top-xs">
          <text class="text-df text-gray">浏览 {{ articleInfo.viewCount }}</text>
        </view>
      </view>
      <view @click="clickDetail(1)" v-if="appointmentInfo">
        <view class="margin-left-xl margin-right bg-gray radius-lg">
          <view class="flex justify-between">
            <view class="padding-top padding-lr-xs">
              <MrAvatar :src="appointmentInfo.nurseAvatar" ></MrAvatar>
            </view>
            <view class="flex flex-sub">
              <view class="padding-xs padding-top-sm text-df text-black ">
                <view class="text-bold">预约信息</view>
                <view class="text-gray text-sm padding-top-xs">
                  <text class="text-bold">类型：</text>
                  {{ getAppointmentType(appointmentInfo.type) }}
                </view>
                <view class="text-gray text-sm padding-top-xs">
                  <text class="text-bold">患者姓名：</text>
                  {{ appointmentInfo.patientName }}
                </view>
                <view class="text-gray text-sm padding-top-xs">
                  <text class="text-bold">预约时间：</text>
                  {{ getStartEndTimeString(appointmentInfo.appointmentTime) }}
                </view>
                <view class="text-gray text-sm padding-top-xs">
                  <text class="text-bold">创建时间：</text>
                  {{ appointmentInfo.createTime }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 提示、评论、分享 -->
      <view class="flex justify-between text-gray padding-top-xs">
        <view class="margin-lr padding-left padding-top-xs text-lg">
          <view @click="likeCommentRoot()" v-if="commentRootInfo.isLike===1" style="color: orange"
                class="cuIcon-appreciate">
            <text class="text-df text-gray"> {{ commentRootInfo.likeCount }}</text>
          </view>
          <view @click="likeCommentRoot()" v-else class="cuIcon-appreciate">
            <text class="text-df text-gray"> {{ commentRootInfo.likeCount || '成为第一个点赞的人' }}</text>
          </view>
        </view>
        <view class="margin-lr padding-left padding-top-xs text-lg">
          <text class="cuIcon-comment" @click="clickReply()"></text>
        </view>
      </view>
      <!-- 评论回复 -->
      <view class="margin-left-xl margin-right bg-gray radius-lg" v-if="commentRootInfo.commentReplyList">
        <view class="margin-tb-xs  padding-tb solid-bottom" v-for="(item,index) in commentRootInfo.commentReplyList" :key="index">
          <view class="margin-lr  padding-top-sm">
            <text class="text-df text-blue">{{item.fromUsername}}:</text>
            <text class="text-black text-break-all">{{item.content}}</text>
          </view>
        </view>
      </view>
    </view>
          <view class="margin-left-sm padding-left text-black">
                  <view v-if="replyShow">
                    <view class="solids padding radius-lg">
                      <input placeholder="请输入回复内容" v-model="replyContent"
                             focus @confirm="addCommentReply"
                             confirm-type="send" @blur="replyShow=false">
                    </view>
                  </view>
          </view>
  </view>
</template>

<script setup lang="ts">
import {getStartEndTimeString} from "@/utils/common/myUtils";
import {getAppointmentType} from "@/utils/common/myStandard";

import {defineProps, ref} from "vue";
import { onReady} from "@dcloudio/uni-app";
import api from "@/api";
import {useUserStore} from "@/store";
import MrAvatar from "@/components/common/MrAvatar.vue";
import MrImage from "@/components/common/MrImage.vue";
import {imagePathPrefix} from '/settings'

const prefix =imagePathPrefix
const articleInfo = ref()
const appointmentInfo = ref()
const commentRootInfo = ref()

const replyShow =ref(false)
const replyContent =ref('')
const userStore= useUserStore()


const props = defineProps({
  commentRootItem:{
    type:Object,
    default:{}
  }
})

onReady(()=>{
  getInfo(props.commentRootItem.targetId, props.commentRootItem.targetType)
  getCommentRootInfo(props.commentRootItem.id)
})

/**
 * 获取评论信息
 * @param id
 */
const getCommentRootInfo = (id: any) => {
  api.comment.commentRootReadById({
    id: id
  }).then(res => {
    if (res && res.data.code === 0) {
      commentRootInfo.value = res.data.data
    }
  })
}
/**
 * 获取文章 或 预约信息
 * @param id
 * @param type
 */
const getInfo = (id: any, type: any) => {
  if (type === 1) {
    api.appointment.id({
      id: id,
    }).then(res => {
      if (res && res.data.code === 0) {
        appointmentInfo.value = res.data.data
      }
    })
  } else if (type === 2) {
    api.article.id({
      id: id,
    }).then(res => {
      if (res && res.data.code === 0) {
        articleInfo.value = res.data.data
      }
    })
  }
}
/**
 * 点赞评论
 * id 评论来自用户名
 */
const likeCommentRoot = () => {
  commentRootInfo.value.isLike = Math.abs(commentRootInfo.value.isLike - 1)
  if (commentRootInfo.value.isLike) {
    commentRootInfo.value.likeCount++;
  } else {
    commentRootInfo.value.likeCount--;
  }
  api.comment.likeCommentRoot({
    id: commentRootInfo.value.id,
    toUsername: commentRootInfo.value.fromUsername
  }).then(res => {
    uni.showToast({
      title: res.data.msg,
      icon: 'success'
    })
  })
}

const clickReply = (item: any) => {
  replyShow.value = true
}
/**
 * 回复
 */
const addCommentReply = () => {
  // 回复回复  回复评论
  let params ={
    rootId: commentRootInfo.value.id,
    fromUsername: userStore.userInfo.username,
    fromAvatar: userStore.userInfo.avatar,
    fromName: ' ',
    toUsername: commentRootInfo.value.fromUsername,
    toName: commentRootInfo.value.fromName,
    toAvatar: commentRootInfo.value.fromAvatar,
    content: replyContent.value,
  }
  api.comment.createCommentReply(params).then(res => {
    if (res && res.data.code === 0) {
      uni.showToast({
        title: res.data.msg,
        icon: 'success',
        success: () => {
          commentRootInfo.value.commentReplyList.unshift({
            ...params,
            createTime:'刚刚'
          })
          replyContent.value = ''
        }
      })
    }
  })
}
const clickDetail =(type: any)=>{
  if(type===1){
    uni.navigateTo({
      url: '/pages/patient/appointment/records/appraise?appointmentInfo=' + encodeURIComponent(JSON.stringify(appointmentInfo.value))
    })
  }else if(type===2){
    uni.navigateTo({
      url: '/pages/common/article/article?articleInfo=' + encodeURIComponent(JSON.stringify(articleInfo.value))
    })
  }
}


</script>

<style scoped>

</style>